<template>
  <div>
    
      <div class="head" >
        <el-card class="classify">
          <div>
            <img :src="item.avatar" class="image" />
          </div>

          <div style="padding: 14px; text-align: center">
            <span class="classifyChild">{{item.name}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.described}}</time>
            </div>
          </div>
        </el-card>
      </div>
    
    


    <div class="a" v-for="item in article" :key="item.id">
          <ArticleCard :msg="item"> </ArticleCard>
        </div>
        <div class="page">
        <el-pagination
    layout="prev, pager, next"
    :total="totalPage"
        @current-change="getPage">
    
  </el-pagination>
</div>
  </div>
</template>

<script>
import ArticleCard from "@/components/card/ArticleCard.vue";
import { getArticle } from "@/api/article";
export default {
  data () {
    return {
      article:[],
      totalPage: 0,
      page: {
        findMsg: null,
        pageNumber: 1,
        sortId:0,
        tagId:0
      },
      item:{
        
      }
    }
  },
   created() {
    
    this.item=JSON.parse(this.$route.query.item)
   
    if(this.$route.query.sortId!==undefined){
      this.page.sortId=this.$route.query.sortId
      
    return  getArticle(this.page).then((res) => {
      this.article = res.data;
      this.totalPage = res.data[0].total * 10;
    });
    }
    this.page.tagId=this.$route.query.tagId
    console.log(this.page.tagId);
    return  getArticle(this.page).then((res) => {
      this.article = res.data;
      this.totalPage = res.data[0].total * 10;
    })
   
  },
  methods:{
      getPage(val) {
      this.page.pageNumber = val;
      getArticle(this.page).then((res) => {
        this.article = res.data;
        // this.totalPage=res.data[0].total*10
      });
    },
  },
  components: {
    ArticleCard
  }
  
};
</script>

<style scoped>
.page {
  width: 350px;
  margin: 0 auto;
}
.head {
  height: 300px;
  width: 300px;
  position: relative;
  margin: 0 auto;
  margin-bottom: 20px;
}
.card {
  padding: 10px;
}
.time {
  font-size: 14px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100px;
  height: 100px;

  display: inline-block;
  vertical-align: middle;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.classify {
  
  text-align: center;
}
.classifyChild {
  font-size: 20px;
  font-weight: bold;
}
.a {
  margin-bottom: 10px;
}
</style>